<template>
  <div>
    <div>
      <div class="inp">
        <van-cell-group inset>
          <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                @click="yzm"
                :disabled="flag_1"
                >{{ txt }}</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
      </div>
      <div class="next">
        <van-button
          type="block"
          round
          color="red"
          @click="next"
          :disabled="flag"
          >下一步</van-button
        ><br />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
import {doSendMsgCode,doCheckCode} from '../../api/reg2'

Vue.use(Toast);
export default {
  data() {
    return {
      sms: "",
      txt: "发送验证码",
      time: 60,
      flag_1: false,
    };
  },
  methods: {
    yzm() {
      const timer = setInterval(() => {
        if (this.time <= 0) {
          clearInterval(timer);
          this.txt = "发送验证码";
          this.flag_1 = false;
        } else {
          this.time--;
          this.txt = this.time + "s后重新发送";
          this.flag_1 = true;
        }
      }, 1000);

      // 发送验证码请求
    //   qAxios.post("/user/dosendmsgcode", { tel: localStorage.getItem("tel") })
    doSendMsgCode({ tel: localStorage.getItem("tel") })
        .then((res) => {
          console.log(res.data.data);
          setTimeout(()=>{
              this.sms = res.data.data;
          },3000)
        });
    },
    next() {
      // 验证验证码是否正确
    //   qAxios.post("/user/docheckcode", {tel: localStorage.getItem("tel"), telcode: this.sms,})
       doCheckCode({tel: localStorage.getItem("tel"), telcode: this.sms,}) .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
              this.$router.push("/register/reg3");
          } else if (res.data.code == 10007) {
             Toast('验证码有误，请重新发送');
          }
        });
    },
  },
  computed: {
    flag() {
      if (/^\d{5}$/.test(this.sms)) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style>
</style>